<template>
	<el-breadcrumb separator="/">
	  <el-breadcrumb-item :to="{ path: '/administrator/AdministerPicture' }">首页</el-breadcrumb-item>
	  <el-breadcrumb-item>公众监督数据列表</el-breadcrumb-item>
	</el-breadcrumb>
	<el-table :data="tableData" style="width: 100%" border="true" :show-header="false">
	    <el-table-column prop="name" label="名称">
	    <template #default="{ row }">
	        <span style="font-weight: bold;">{{ row.name }}</span>
	    </template>
	    </el-table-column>
	    <el-table-column prop="value" label="值"></el-table-column>
	</el-table>
	<el-switch v-model="isSwitchOn" @change="toggleSwitch" ></el-switch>
	<div v-if="isSwitchOn">
		<el-form-item label="本地指派" style="margin-right: 20px;">
		  <el-select
		    v-model="ruleForm.assign"
		    placeholder=""
			 style="width: 100px;" 
		  >
		    <el-option
		      v-for="assign in assigns"
		      :key="assign.value"
		      :label="assign.label"
		      :value="assign.value"
		    />
		  </el-select>
		</el-form-item>
	    <el-button type="primary" @click="assign">本地指派</el-button>
	  </div>
	  <div v-else>
	    <el-form-item label="所在省" style="margin-right: 20px;">
	      <el-select
	        v-model="ruleForm.province"
	        placeholder="-全部-"
	        @change="handleProvinceChange"
	    	 style="width: 100px;" 
	      >
	        <el-option
	          v-for="province in provinces"
	          :key="province.value"
	          :label="province.label"
	          :value="province.value"
	        />
	      </el-select>
	    </el-form-item>
		<el-form-item label="所在市" prop="city" style="margin-right: 20px;">
		  <el-select
		    v-model="ruleForm.city"
		    placeholder="-全部-"
		    :disabled="!cities.length"
			style="width: 100px;" 
		  >
		    <el-option
		      v-for="(city,index) in cities"
		      :key="city.value"
		      :label="city.label"
		      :value="index"
		    />
		  </el-select>
		</el-form-item>
		<el-form-item label="本地指派" style="margin-right: 20px;">
		  <el-select
		    v-model="ruleForm.assign"
		    placeholder=""
			 style="width: 100px;" 
		  >
		    <el-option
		      v-for="assign in assigns"
		      :key="assign.value"
		      :label="assign.label"
		      :value="assign.value"
		    />
		  </el-select>
		</el-form-item>
	    <el-button type="primary" @click="assign">异地指派</el-button>
	  </div>
</template>

<script setup>
	const formData = route.query.formData ? JSON.parse(route.query.formData) : {};
	import { reactive, ref, onMounted } from 'vue';
	import axios from 'axios';
	import { useRouter } from 'vue-router';
	import { ElMessage } from 'element-plus';
	
	const tableData = reactive([
	  { name: '公共监督反馈信息编号', value: '数据1' },
	  { name: '反馈者信息', value: '数据2' },
	  { name: '反馈者电话', value: '数据3' },
	  { name: '反馈者所在地址', value: '数据4' },
	  { name: '反馈者信息描述', value: '数据4' },
	  { name: '预估等级', value: '数据4' },
	  { name: '反馈者日期时间', value: '数据4' }
	])
</script>

<style >
</style>